<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name=viewport content="width=device-width">
  <title>JSSDKMainPage</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<body>
<div>
  <div class="container">
    <h1>Weixin Express for Web Pay</h1>
  </div>


  <script>

    //从服务器获取配置好的数据
    function wxPayConfig(no, fee, desc, cb) {
      $.ajax({
        url: '/weixin/pay/init',
        data: {
          no: no,
          fee: fee,
          desc: desc
        }
      }).success(function (config) {
        cb(config);
      });
    }

    //调用微信JS api 支付
    function wxPay(config) {
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        config,
        function (res) {
          WeixinJSBridge.log(res.err_msg);
        }
      );
    }

    function onBridgeReady() {
      wxPayConfig(new Date().getTime(), 1, '测试支付', function (config) {
        wxPay(config.data);
      });
    }
    $(document).ready(function () {
      document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    });
  </script>
</div>
</body>
</html>
